<template>
  <el-card>
    <div>
      <div v-for="p in state" :key="p.id">
        <div class="all">
          <el-checkbox
            v-model="p.isCheckAll"
            :indeterminate="p.isIndeterminate"
            @change="checkAllChange(p)"
            >{{ p.name }}</el-checkbox
          >
        </div>

        <el-checkbox-group v-model="p.checkeds" @change="groupChange(p)">
          <el-checkbox v-for="c in p.children" :key="c.id" :label="c.id">{{
            c.name
          }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="flex">
        <el-button @click="empty">清空</el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getListResourceAPI,
  getResourceListAllAPI,
  getResourceCategoryListAllAPI,
  roleAllocResourceAPI,
} from "./api";
//路径
const route = useRoute();
//路由
const router = useRouter();

//角色列表类型
type IState = IResourceCategoryModel & {
  children: IResourceModel[];
  checkeds: number[];
  isCheckAll: boolean;
  isIndeterminate: boolean;
};
//资源列表数据
let state = ref<IState[]>([]);

//等待三个请求回来一起处理
if (route.query.id) {
  Promise.all([
    getResourceCategoryListAllAPI(),
    getResourceListAllAPI(),
    getListResourceAPI(parseInt(route.query.id as string)),
  ])
    .then((res) => {
      //给第一层数组添加数据
      state.value = res[0].data.map((item) => ({
        ...item,
        children: [],
        checkeds: [],
        isCheckAll: false,
        isIndeterminate: false,
      }));
      //给第二层数组添加数据
      res[1].data.forEach((item) => {
        const cart = state.value.find((ele) => ele.id === item.categoryId);
        cart && cart.children.push(item);
      });
      //处理是否打勾的数据
      res[2].data.forEach((item) => {
        const ele = state.value.find((ele) => ele.id === item.categoryId);
        ele && ele.checkeds.push(item.id);
      });
      //判断数据是全选还是半选
      state.value.forEach((item) => {
        //全选
        item.isCheckAll = item.checkeds.length === item.children.length;
        //半选
        item.isIndeterminate =
          item.checkeds.length > 0 &&
          item.checkeds.length < item.children.length;
      });
    })
    .catch(() => {});
}

//全选事件
const checkAllChange = (data: IState) => {
  if (!data.isCheckAll) {
    data.checkeds = [];
  } else {
    data.checkeds = data.children.map((item) => item.id);
  }
  //半选
  data.isIndeterminate =
    data.checkeds.length > 0 && data.checkeds.length < data.children.length;
};
//半选事件
const groupChange = (data: IState) => {
  //全选
  data.isCheckAll = data.checkeds.length === data.children.length;
  //半选
  data.isIndeterminate =
    data.checkeds.length > 0 && data.checkeds.length < data.children.length;
};
//清空
const empty = () => {
  state.value.forEach((item) => {
    item.checkeds = [];
    item.isCheckAll = false;
    item.isIndeterminate = false;
  });
};
//确认
const determine = () => {
  roleAllocResourceAPI({
    roleId: parseInt(route.query.id as string),
    resourceIds: state.value.reduce<number[]>(
      (pre, cur) => pre.concat(cur.checkeds),
      []
    ),
  }).then((res) => {
    if (res.code === 200) {
      //提示
      ElMessage.success("修改成功");
      //跳转到角色列表
      router.push("/ums/role");
    }
  });
};
</script>

<style scoped>
.all {
  padding: 20px;
  background-color: #f2f6fc;
}
:deep(.el-checkbox-group) {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 33%);
}
.flex {
  text-align: center;
}
</style>
